<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Inventory 
      <span *ngIf="(gameService.player$ | async) as player">
        ({{ player?.$inventoryData?.items.length }}/{{ player?.$inventoryData?.size }})
      </span>
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openAllMenu($event)">
        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.items$ | async) as items">
    <div class="blank-slate" *ngIf="!items?.length">
      You have no items in your inventory.
    </div>

    <ion-row *ngFor="let item of items">
      <ion-col>
        <app-item [item]="item" 
                  [showLock]="true"
                  [slot]="item.type"
                  (itemMenu)="openItemMenu($event, item)"></app-item>
      </ion-col>
    </ion-row>
  </ng-container>
</ion-content>
